<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>图文详情</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/circle.css">
    <link rel="stylesheet" href="../../css/varieties.css">


    <style>
        header .flex-x-sb {
            justify-content: flex-start;
        }

        .whiteArea {
            height: 30px;
        }
        .swiper-slide {
            width: 100%;
            height: 3.75rem;
        }

        .swiper-slide img {
            width: 100%;
            height:  3.75rem;
            /* border-radius: 0.05rem; */
        }

        .swiper-slide video {
            width: 3.5rem;
            height: 3.5rem;
            /* border-radius: 0.05rem;
            background: #000; */
        }

        .varieties-swiper .swiper-pagination .swiper-pagination-bullet-active {
            background: #fff;
            width: .11rem;
            height: 0.03rem;
            border-radius: 1.5px;
        }

        .varieties-swiper .swiper-pagination-bullet {
            width: 0.03rem;
            height: 0.03rem;
            background: #fff;
            opacity: 0.4;
            margin: 0 1.5px;
        }
    </style>
</head>

<body>
    <div class="app circle-detail-app" v-cloak style="position: relative;" @click="hideInput">
        <div class="circle-detail-introduce">
            <safe-area class="safeArea">
                <div class="whiteArea"></div>
                <header>
                    <div class="flex-x-sb" style="position: relative;">
                        <span class="iconfont goback" @click="back">&#xe66f;</span>
                        <div class="title-user">
                            <img class="title-user-img"
                                :src="!!detailData.headImg ? detailData.headImg : 'https://cdn.tiexiemall.com/static/user/default.png'"
                                alt="">
                            <span class="title-user-nickname">{{ detailData.nickName }}</span>
                            <span v-if="detailData.attentionFlag != -1" class="title-tag"
                                :class="[detailData.attentionFlag ? '' : 'blue-title-tag']"
                                @click="handleFollow">{{detailData.attentionFlag ? '已关注' : '关注'}}</span>
                        </div>
                        <div class="circle-header-btns" @click="showPopBox=!showPopBox">
                            <span v-for="item in 3" :key="item"></span>
                        </div>
                        <div class="circle-handle-select-box" v-show="showPopBox">
                            <div class="circle-handle-select-item" @click="showDialog">
                                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/report_icon.png" />
                                举报
                            </div>
                            <div v-if="screenType==3" class="circle-handle-select-item circle-handle-select-item-delete"
                                @click="deleteTopic">
                                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/delete_icon.png" />
                                删除
                            </div>
                        </div>
                    </div>
                </header>
            </safe-area>
            <!-- 轮播 -->
            <div class="varieties-swiper">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <template v-for="(banner,index) in detailData.medias">
                            <div  class="swiper-slide flex-x-c"
                                @click="preview(index,detailData.medias)" :key="index">
                                <img :src="banner.imagePath" alt="">
                            </div>

                        </template>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>


            <!-- <div class="circle-swiper">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <template v-for="(banner,index) in detailData.medias">
                            <div class="swiper-slide flex-x-c"
                            @click="preview(index,detailData.medias)" :key="index">
                                <img :src="banner.imagePath" alt="">
                            </div>
  

                        </template>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div> -->
            <!-- 介绍 -->
            <div class="circle-content">
                <div class="circle-detail-title">{{detailData.title}} </div>
                <div class="circle-detail-content">{{detailData.content}}</div>
                <div class="circle-detail-other">
                    <span>{{detailData.publishTime}}</span>
                    <span>{{detailData.hitNumber}}人看过</span>
                </div>
            </div>
            <!-- 评论 -->
            <div class="circle-comment-box">
                <div class="circle-comment-head">{{detailData.commentNumber}}条评论</div>
                <div class="circle-comment-list">
                    <div class="circle-comment-list-item" v-for="(item, index) in commentLists"
                        :key="'comment' + index">
                        <img class="circle-comment-item-avator"
                            :src="item.headImg? item.headImg : 'https://cdn.tiexiemall.com/static/user/default.png'"
                            alt="avator">
                        <div class="circle-comment-item-box">
                            <div class="circle-comment-item-main">
                                <div class="circle-comment-list-content">
                                    <div class="circle-comment-item-title">{{ item.nickName }}</div>
                                    <div class="circle-comment-item-content" @click.stop="doWrite(item)">{{ item.content
                                        }}
                                        <span class="circle-comment-item-time">{{ item.publishTime }}</span>
                                    </div>
                                </div>
                                <div class="circle-comment-thumpup" @click="handleCommentThumpUp(item)">
                                    <img class="circle-comment-thumpup-img"
                                        :src="item.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                    <p class="circle-comment-thumpup-num">{{ item.thumbsNum }}</p>
                                </div>
                            </div>
                            <div class="circle-comment-item-replay"
                                v-if="item.childTopicComments && item.childTopicComments.length > 0">
                                <template v-for="(subItem, subIndex) in item.childTopicComments">
                                    <div class="circle-comment-list-item" v-if="subIndex === 0 || item.showMore"
                                        :key="'replay' + subIndex">
                                        <img class="circle-comment-item-avator"
                                            :src="subItem.headImg? subItem.headImg : 'https://cdn.tiexiemall.com/static/user/default.png'"
                                            alt="avator">
                                        <div class="circle-comment-list-content" @click.stop="doWrite(item,subItem)">
                                            <div class="circle-comment-item-title"
                                                @click.stop="doWrite(item,subItem,subItem.userId,subItem.nickName)">{{
                                                subItem.nickName }}</div>
                                            <div class="circle-comment-item-content">
                                                <span v-if="subItem.toNickName">回复
                                                    <span class="circle-comment-replay-username"
                                                        @click.stop="doWrite(item,subItem,subItem.toUserId,subItem.toNickName)">{{subItem.toNickName}}</span>
                                                </span>
                                                {{ subItem.content }}
                                                <span class="circle-comment-item-time">{{ subItem.publishTime }}</span>
                                            </div>
                                        </div>
                                        <div class="circle-comment-thumpup" @click="handleCommentThumpUp(subItem)">
                                            <img class="circle-comment-thumpup-img"
                                                :src="subItem.thumbsFlg ? thumpupActiveIcon : thumpupIcon "
                                                alt="thumpup">
                                            <p class="circle-comment-thumpup-num">{{ subItem.thumbsNum }}</p>
                                        </div>
                                    </div>
                                </template>
                                <div v-if="!item.showMore && item.childTopicComments.length > 1"
                                    class="circle-comment-list-replay-morebtn" @click="showMoreComment(item, index)">
                                    展开{{item.childTopicComments.length - 1}}条回复</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="circle-comment-list-nomore">- 没有更多了 -</div>
            </div>
        </div>

        <!-- 按钮区 -->
        <div class="circle-comment-fixed-btns circle-comment-fixed-whiteBac iphonex-padding-bottom">
            <!-- 发表评论 -->
            <div class="circle-comment-search-btn" @click="handleComment">说点什么吧~
            </div>
            <!-- 分享 -->
            <div class="circle-comment-share-btn" @click="handleShare">{{detailData.forwardNumber}}
            </div>
            <!-- 点赞 -->
            <div class="circle-comment-thumpup-btn" :class="[detailData.likeFlag ? 'active': '']"
                @click="handleThumpUp(detailData)">{{detailData.likeNumber}}
            </div>
            <!-- 评论 -->
            <div class="circle-comment-speak-btn" @click="handleComment">{{detailData.commentNumber}}
            </div>
        </div>

        <!-- 写评论 -->
        <div class="dynamic_detail_write flex-x-s iphonex-padding-bottom" @click.stop="doWrite()"
            v-show='showCommentInput'>
            <input type="text" placeholder="说点什么吧~" maxlength="500" readonly>
            <div class="send_btn">发送</div>
        </div>


    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/swiper.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            var inputField = api.require('inputField');
            imgLazyLoad();
            var photoBrowser = api.require('photoBrowser');
            vm = new Vue({
                el: '.app',
                data() {
                    return {
                        module: 'TOPIC',
                        // topicId: '1405109482593247233',
                        topicId: api.pageParam.topicId,
                        screenType: api.pageParam.screenType,
                        thumpupIcon: 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/thumpup_icon.png', // 未点赞状态
                        thumpupActiveIcon: 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/thumpup_selected_icon.png', // 点赞状态
                        showPopBox: '', // 显示右上角操作按钮
                        showCommentInput: '', // 显示评论输入框
                        detailData: {
                            attentionFlag: 0, // 关注状态 -1: 本人 0: 未关注 1: 关注
                            auditStatus: 0, // 审核状态 0: 待审核 1: 通过 2: 驳回
                            channelId: 0, // 频道ID
                            commentNumber: 0, // 评论数量
                            content: '', // 动态内容
                            forwardNumber: 0, // 转发数量
                            headImg: '', // 发布用户头像
                            hitNumber: 10, // 单击数量
                            likeFlag: false, // 是否点赞
                            likeNumber: 0, // 点赞数量
                            location: '', // 定位经纬度 格式: lon, lat
                            medias: [],
                            nickName: '', // 发布用户昵称
                            publishTime: '', // 发布时间
                            sort: 0, // 排序
                            title: '', // 发布标题
                            topicId: 0,
                            type: 0, // 类型 0: 图文 1: 视频
                            userId: 0 // 用户id
                        },
                        commentLists: [
                            {
                                childTopicComments: [ // 回复人
                                ],
                                content: '', // 评论内容
                                headImg: '', // 评论用户头像
                                nickName: '', // 评论用户昵称
                                publishTime: '', // 评论时间
                                thumbsFlg: false, // 当前登录人是否点赞
                                thumbsNum: 0, // 评论点赞总数
                                toNickName: '', // 被评论人用户昵称
                                toUserId: 0, // 被评论人ID
                                topicCommonId: 0, // 动态评论id
                                type: 0, // 评论类型
                                userId: 0 // 评论用户id
                            }
                        ],
                    }
                },
                mounted() {
                    this.initDetail();

                    setBDPageStart("发现-图文详情")
                    this.recordCircleViewNum()

                },
                methods: {
                    // 添加一条浏览量
                    recordCircleViewNum(item) {
                        var vm =  this;

                        fnPut(interfaces.CONTENT_MODULE.CIRCLE.RECORD_VIEW_NUM + "/" + vm.topicId, {},
                            false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    // toastMiddle('添加浏览记录成功')
                                } else
                                    toastBottom(ret ? ret.msg : '');
                            }
                        )
                    },
                    // 数据初始化
                    initDetail(vm) {
                        var vm = vm || this;
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_NEWDETAIL + "/" + vm.topicId, {}, false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.detailData = ret.data.topic
                                    vm.commentLists = ret.data.topicComments
                                    vm.$nextTick(() => {
                                        vm.initSwiper()
                                    })
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                    },

                    // 初始化轮播
                    initSwiper() {
                        new Swiper(".swiper-container", {
                            initialSlide: 0,
                            slidesPerView: "auto",
                            centeredSlides: !0,
                            watchSlidesProgress: !0,
                            pagination: ".swiper-pagination"
                        });
                    },

                    // 展开更多回复评论
                    showMoreComment(item, index) {
                        this.$set(this.commentLists[index], 'showMore', true)
                    },

                    // 图片预览
                    preview(index, medias) {
                        previewPhoto(index, medias, photoBrowser)
                    },

                    // 评论 点赞/取消点赞
                    handleCommentThumpUp(item) {
                        var vm = this;
                        circle("doComentThumb")(item, function (ret) {
                            vm.initDetail();
                            item.thumbsFlg = !item.thumbsFlg;
                            if (item.thumbsFlg) {
                                item.thumbsNum += 1;
                                toastMiddle('点赞成功')
                            } else {
                                item.thumbsNum -= 1;
                                toastMiddle('取消点赞')
                            }
                        })
                    },

                    // 动态 点赞/取消点赞
                    handleThumpUp(item) {
                        var vm = this;
                        circle("doThumb")(item, function (ret) {
                            vm.initDetail();
                            item.likeFlag = !item.likeFlag;
                            if (item.likeFlag === true) {
                                item.likeNumber += 1;
                                toastMiddle('点赞成功')
                            } else {
                                item.likeNumber -= 1;
                                toastMiddle('取消点赞')
                            }
                            api.sendEvent({
                                name: 'refreshLike'
                            })
                        })
                    },

                    // 隐藏输入框
                    hideInput(e) {
                        if (e.target._prevClass !== 'circle-comment-search-btn' && e.target._prevClass !== 'circle-comment-speak-btn') {
                            this.showCommentInput = false
                        }
                        inputField.close();
                        inputField.resignFirstResponder();

                        // 点击空白处关闭右上角弹框
                        if (e.target._prevClass !== 'circle-handle-select-box' && e.target._prevClass !== 'circle-header-btns') {
                            this.showPopBox = false
                        }
                    },
                    // 写评论
                    doWrite(comment, childComment, toUserId, toNickName) {
                        if (!checkToken()) return false;
                        let vm = this
                        let item = {}
                        if (comment) {
                            item = {
                                topicId: vm.topicId,
                                toUserId: comment.userId,
                                topicCommonId: comment.topicCommonId,
                                nickName: comment.nickName
                            }
                            if (childComment) {
                                item.topicCommonId = comment.topicCommonId
                                item.toUserId = childComment.toUserId
                                item.nickName = childComment.nickName
                            }
                            if (toUserId) {
                                item.toUserId = toUserId
                            }
                            if (toNickName) {
                                item.nickName = toNickName
                            }
                        } else {
                            item = {
                                topicId: vm.topicId,
                                toUserId: undefined,
                                topicCommonId: undefined,
                                nickName: ''
                            }
                        }
                        var tempName = item.nickName;
                        if (item.nickName !== '请输入') {
                            tempName = '回复' + item.nickName + ':'
                        }
                        inputField.open({
                            bgColor: '#f7f7f7',
                            lineColor: '#f7f7f7',
                            fileBgColor: '#fff',
                            borderColor: '#fff',
                            sendBtn: {
                                bg: '#3F8CEC', //字符串类型；发送按钮常态背景色
                                inputBg: '#3F8CEC', //(可选项)字符串类型；当输入文字发时送按钮的背景色；默认：bg的色值
                                bgHighlight: '#000', //字符串类型；发送按钮点击时的高亮背景色
                                title: '发送', //字符串类型；发送按钮的标题
                                titleSize: 13, //数字类型；发送按钮的标题字体大小
                                titleColor: '#fff', //字符串类型；发送按钮标题文字颜色
                                corner: 5, //数字类型；发送按钮圆角大小
                                sendW: 45, //数字类型；发送按钮的宽
                                sendH: 30, //数字类型；发送按钮的高
                                marginRight: 10, //数字类型；发送按钮距离屏幕右边的距离，本参数暂仅支持iOS平台；默认：10
                            },
                            placeholder: tempName,
                            placeholderStyles: {
                                color: '#c1c1c1', //字符串类型；占位文字颜色，支持rgb、rgba、#；默认：#696969
                                size: 15, //数字类型；占位文字大小；默认：13
                                marginL: 5,
                            },
                            fixedOn: api.frameName
                        }, function (ret, err) {

                            if (ret) {
                                if (!ret.msg || ret.msg == '') {
                                    toastMiddle('您还没有输入内容！');
                                    return false
                                }
                                const param = {
                                    content: ret.msg,
                                    toUserId: item.toUserId,
                                    topicCommentId: item.topicCommonId,
                                    topicId: item.topicId
                                }
                                fnPost(interfaces.CONTENT_MODULE.CIRCLE.COMMENTON_NEWS, param,
                                    function (ret, err) {
                                        if (ret && ret.code === RESPONSE_OK) {
                                            toastMiddle('评论成功');
                                            vm.showCommentInput = false
                                            vm.detailData.commentNumber++;
                                            setTimeout(() => vm.initDetail(vm), 600)
                                        } else {
                                            toastBottom(ret ? ret.msg : '');
                                        }
                                    }
                                );
                                inputField.close();
                                inputField.resignFirstResponder();
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                        inputField.becomeFirstResponder(function (ret, err) {
                            if (ret.status) {
                                // alert(JSON.stringify(ret));
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                    },

                    // 分享
                    handleShare() {
                        if (!checkToken()) return false;
                        /*
                            * 参数 1: module: 分享所属模块, 主要用于在report_alert_frm.html中配置分享路径
                            * 参数 2: id: 分享是用id决定是哪个详情页
                            * 参数 3: type: 1是举报, 2是分享
                            * 参数 4: description:  分享标题/描述
                            * 参数 5: CIRCLEPIC: 图文分享用,  CIRCLEVIDEO: 视频分享用, 主要用去区分分享出去对应的页面
                        */
                        toReportOrShareDialog(this.module, this.topicId, 2, this.detailData.title, 'CIRCLEPIC')
                    },

                    // 显示分享/举报弹框
                    showDialog() {
                        if (!checkToken()) return false;
                        /*
                            * 参数 1: module: 分享所属模块, 主要用于在report_alert_frm.html中配置分享路径
                            * 参数 2: id: 分享是用id决定是哪个详情页
                            * 参数 3: type: 1是举报, 2是分享
                            * 参数 4: description:  分享标题/描述
                        */
                        toReportOrShareDialog(this.module, this.topicId, 1, this.detailData.title)
                    },

                    // 评论
                    handleComment() {
                        // 开启弹框
                        this.showCommentInput = true
                    },

                    // 关注
                    handleFollow() {
                        const vm = this
                        circle("doFollow")(vm.detailData, function (ret) {
                            vm.detailData.attentionFlag = !vm.detailData.attentionFlag;
                            // 更新列表关注状态
                            this.initDetail();
                        })
                    },

                    // 删除动态
                    deleteTopic() {
                        let vm = this
                        api.confirm({
                            title: '是否删除这条动态？',
                            buttons: ['确定', '取消']
                        }, function (ret, err) {
                            if (ret.buttonIndex === 1) {
                                circle("deleteMoment")(vm.topicId, function (ret) {
                                    setTimeout(() => toastBottom("删除成功"), 250)
                                    api.sendEvent({
                                        name:'refreshAllTopic'
                                    })
                                    setTimeout(() => {
                                        api.closeWin()
                                    }, 500)
                                })
                            }
                        });
                    },

                    // 返回上一级
                    back() {
                        setBDPageEnd("发现-图文详情")
                        api.closeWin();
                    }
                }

            })

            api.addEventListener({
                name: 'keyback'
            }, function (ret, err) {
                setBDPageEnd("发现-图文详情")
                api.closeWin();
            });

            api.addEventListener({
                name: 'addShareRecordSuccess'
            }, function (ret, err) {
                //添加分享记录成功后刷新数据
                vm.initDetail();
            });
        }
    </script>
</body>

</html>